<template>
	<view>
		<pug-skeleton
			rows="2"
			fange="5"
			title
			:rowsWidth="['100%','100%']"
			:fangeWidth="['45%','45%','100%','100%','100%']"
			:fangeHeight="['50','50','20','20','20']"
			:titleWidth="'100%'"
			:titleHeight="380"
			:loading="loading"
		>
			<view class="deta-img" v-if="hotel.imagesList && hotel.imagesList.length > 0">
				<u-swiper :list="hotel.imagesList" keyName="image" @change="swiperChange" :height="480" :autoplay="true" :radius="0" circular></u-swiper>
				<text class="deta-img-mun">
					<u-icon name="photo" class="img-icon"></u-icon>{{swiperIndex + 1}}/{{hotel.imagesList.length}}
				</text>
			</view>
			<view class="main">
				<view class="details-title">{{hotel.title}}</view>
				<view class="details-position" v-if="hotel.description && hotel.description.length > 100">
					<text>{{hotel.description.substr(1,100)}}</text>
					<text v-show="isExpandDesc">{{hotel.description.substr(100)}}</text>
					<text @click="expandDesc" v-if="hotel.description.length > 100"> >>{{isExpandDesc?'收起':'展开'}}</text>
				</view>
				<view class="details-position" v-else>
					<text>{{hotel.description}}</text>
				</view>
				<view class="central">
					<view class="evaluate" @click="openCommentDialog">
						<image src="@/pagessub/static/images/user-pj.png"></image>
						<text>用户评价 ({{hotel.comments||0}})</text>
					</view>
					<view class="map" @click="openMap">
						<image src="@/pagessub/static/images/dingwei.png"></image>
						<text>地图/导航</text>
					</view>
				</view>
				<view class="details-title details-title2">酒店服务</view>
				<view class="service">
					<view class="service-type" v-for="(item,index) in hotelServiceItems" :key="item.id" >
						<view>
							<image :src="item.icon"></image>
						</view>
						<view class="tit">{{item.title}}</view>
					</view>
				</view>
				<view class="details-title details-title2">热门房型</view>
				<view class="list-item flex-row"  :key="item.id" v-for="(item,index) in hotelTypeItems">
					<view class="flex-grow-0 corver-pic corver-picxx" @click.stop="expandShow(index)">
						<image :src="item.img"></image>
					</view>
					<view class="flex-grow-1 flex-col flexs-bottoms">
						<view class="goods-title" @click.stop="expandShow(index)">{{item.title}}</view>
						<view class="goods-titles" @click.stop="expandShow(index)">{{item.description}}</view>
						<!-- <view class="goods-titles">预订后15分钟内可免费取消</view> -->
						<view class="flex-grow-0 flex-row flex-y-bottom flexs-bottoms-text">
							<text class="goods-price">￥{{item.realprice}} <text class="goods-prices">￥{{item.price}}</text></text>
							
							<pug-phonenumer @toggle="toggleEvent(index)" :toggle="toggle" classname="adopt-btn" btntxt="预约">
								<button class="adopt-btn" @tap="toggleEvent(index)">预约</button>
							</pug-phonenumer>
						</view>
					</view>
				</view>
			</view>
			<!--评论弹出层-->
			<u-popup 
				:show="show2" 
				:closeable="false" 
				:safeAreaInsetTop="false" 
				@close="closes2" 
				:customStyle="{'height':'65vh'}"
				:round="10">
				<pug-comment :hotelid="hotelId" @addComment="addComment" ref="loadComment"></pug-comment>
			</u-popup>
			
			<!--房型明细弹出层-->
			<u-popup :show="show"   @close="closes">
				<view style="position: relative;">
					<u-swiper :list="typeSwiperlist" keyName="imageurl" indicator-pos="bottomRight" :current="typeCurrentIndex" :height="380" :autoplay="true" :radius="0" circular></u-swiper>
					<view class="closes" @click="closes">
						<image src="@/pagessub/static/images/close.png"></image>
					</view>
				</view>
				<view style="padding: 15px;">
					<view class="details-title">{{hotelTypeDetail.title}}</view>
					<view class="tips">
						<view class="goods-titles">{{hotelTypeDetail.description}}</view>
					</view>
				</view>
			</u-popup>
		</pug-skeleton>
	</view>
</template>
<script src="./detail.js" lang="js"></script>
<style src="./detail.css" lang="css" scoped></style>


<!-- <script>
	import detail from  './detail.js'
	export default detail;
</script>

<style>
	@import url("./detail.css");
</style>
 -->
